@import "./mixin1.scss";

// @import "./demo.scss";
#loginBtn,
#userDropdown {

    display: none;
}

#userDropdown {
    line-height: 26px;
}

// #userDropdown{
//     margin-top: -10px;
// }
// #userDropdown{
//     display: none;
//     // display: inline-block;
// }

.icon {
    margin-right: 10px;
}

.dr_navsuv {
    display: flex;
    position: absolute;
    // bottom: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    line-height: 1;
    transition: all .5s ease-in;
    background: #fafafa;
    // opacity: 0;
}

.lo-re {
    font-size: 16px;
}

.headall {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    transition: all .5s;
    box-shadow: 0 2px 20px 0 rgb(0 0 0 / 3%);


    .header-fix {
        position: relative;
        z-index: 6;
        padding: 32px 80px 28px;
        height: 144px;
        text-align: center;
        box-sizing: border-box;
        background-color: #fff;

        .logo-wrapper {
            text-align: center;
            display: inline-block;
            cursor: pointer;
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);

            a {
                width: 200px;
                height: 16px;

                img {
                    width: 200px;
                }
            }
        }
    }


    .header-bot {

        background-color: #fff;

        .header-left {
            position: absolute;
            top: 34px;
            left: 52px;
            z-index: 10;

            .out_ul {
                display: flex;
                align-items: center;

                .loaction {
                    position: relative;
                    margin-right: 38px;
                    display: flex;
                    align-items: center;

                    .hd_tit {
                        color: #1c1c1c;
                        cursor: pointer;

                        a {
                            display: inline-block;
                            font-size: 0;
                            color: #1c1c1c;

                            .iconfont {
                                display: inline-block;
                                // margin-right: 10px;
                                // font-size: 20px;
                                font-family: iconfont !important;
                                font-style: normal;
                                width: 20px;
                                height: 21px;
                                vertical-align: -5px;
                                fill: currentColor;
                                overflow: hidden;
                            }

                            .txt {

                                display: inline-block;
                                font-size: 16px;
                            }
                        }
                    }
                }

                .member-shop {
                    position: relative;
                    margin-right: 38px;
                    display: flex;
                    align-items: center;

                    .hd_tit {
                        color: #1c1c1c;
                        cursor: pointer;

                        .iconicon_tianmaoqijiandian {
                            display: inline-block;
                            margin-right: 10px;
                            font-size: 20px;
                            font-family: iconfont !important;
                            font-style: normal;
                            width: 20px;
                            height: 21px;
                            vertical-align: -5px;
                            fill: currentColor;
                            overflow: hidden;
                        }

                        .txt {
                            display: inline-block;
                            font-size: 16px;
                        }
                    }

                    .sub {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%);
                        padding-top: 15px;

                        ul {
                            position: relative;
                            padding: 25px 5px;
                            border-top: 1px solid #f4f3f2;
                            background-color: #fff;
                            box-shadow: 0 0 2px 3px #fcfcfc;
                            display: flex;

                            li {
                                display: block;
                                font-size: 16px;
                                text-align: center;
                                color: #555250;
                                margin: 0 20px;

                                img {
                                    width: 80px;
                                    height: 80px;
                                    margin-bottom: 7px;
                                }

                                a {
                                    position: relative;
                                    color: #555250;
                                }
                            }
                        }
                    }
                }

                .order-shop {
                    position: relative;
                    margin-right: 38px;
                    display: flex;
                    align-items: center;

                    .hd_tit {
                        color: #1c1c1c;
                        cursor: pointer;
                        font-size: 16px;

                        a {
                            display: inline-block;
                            font-size: 0;
                            color: #1c1c1c;

                            .iconicon_dian1,
                            icondingbu-zixun,
                            icon-dianpu {
                                display: inline-block;
                                margin-right: 10px;
                                font-size: 20px;
                                font-family: iconfont !important;
                                font-style: normal;
                            }

                            .txt {
                                display: inline-block;
                                font-size: 16px;
                            }
                        }
                    }

                    .contact-wrap {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        min-width: 440px;
                        transform: translateX(-50%);
                        padding-top: 15px;

                        ul {
                            position: relative;
                            padding: 25px 5px;
                            border-top: 1px solid #f4f3f2;
                            background-color: #fff;
                            box-shadow: 0 0 2px 3px #fcfcfc;
                            display: flex;

                            .l-wrap {
                                padding: 10px 28px 26px;
                                white-space: nowrap;

                                .text-consult {
                                    cursor: pointer;
                                    margin-bottom: 42px;

                                    a {
                                        font-size: 16px;
                                        color: #22282d;

                                        .iconkefu,
                                        icondingbu-yijianfankui {
                                            margin-right: 10px;
                                            font-size: 20px;
                                            vertical-align: middle;
                                            font-family: iconfont !important;

                                            font-style: normal;
                                        }

                                        span {
                                            position: relative;
                                        }
                                    }
                                }

                                .filter-text {
                                    cursor: pointer;

                                    a {
                                        font-size: 16px;
                                        color: #22282d;

                                        span {
                                            position: relative
                                        }

                                        ;
                                    }
                                }
                            }

                            .r-wrap {
                                display: flex;
                                border-left: 1px solid #ebeced;
                                padding: 0 35px;

                                .qrcode-wrap {
                                    margin-right: 55px;
                                    text-align: center;

                                    .qrcode {
                                        width: 80px;
                                        height: 80px;
                                        display: inline-block;

                                        img {
                                            width: 100%;
                                        }
                                    }

                                    p {
                                        padding-top: 2px;
                                        font-size: 13px;
                                        color: #6e7376;
                                        white-space: nowrap;
                                        line-height: 18px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .dr_navWrap {
            position: relative;
            width: 100%;

            .dr_nav {
                display: flex;
                justify-content: center;
                // transition: all .5s ease-in-out;
                padding-left: 0;
                background-color: #fff;
                position: relative;
                height: 54px;
                line-height: 53px;
                z-index: 5;
                transform: translateY(0px);
                transition: all .5s ease-in;

                #ppgsNav:hover {
                    #ppgssubNav {
                        // background-color: red;
                        transform: translateY(510px);
                        width: 100%;
                    }

                    .link-text1 {
                        color: #997162;
                    }
                }

                #qhzjNav:hover {
                    #qhzjsubNav {
                        // background-color: red;
                        transform: translateY(780px);
                        width: 100%;
                    }

                    .link-text2 {
                        color: #997162;
                    }
                }

                #zaskNav:hover {
                    #zasksubNav {
                        //    background-color: red;
                        transform: translateY(524px);
                        width: 100%;
                    }

                    .link-text3 {
                        color: #997162;
                    }
                }

                #ppwhNav:hover {
                    #ppwhNavgift {
                        // background-color: skyblue;
                        transform: translateY(401px);
                        width: 100%;
                    }
                    .link-text4 {
                        color: #997162;
                    }
                }
                
                #shopNav:hover {
                    #ShopsubNav {
                        // background-color: skyblue;
                        transform: translateY(320px);
                        width: 100%;
                        z-index: 300;////
                    }
                    .link-text5 {
                        color: #997162;
                    } 
                }

                //合
                li {
                    float: left;
                    padding: 0 10px;
                    width: 115px;
                    text-align: center;
                    background-color: #fff;

                    a {
                        color: #333;
                        font-size: 12px;

                        span {
                            font-size: 16px;
                        }
                    }
                }

                #ppgsNav {
                    // position: absolute;
                    background-color: #fff;

                    //
                    .li_link1 {
                        .link {
                            position: relative;
                            display: inline-block;
                            color: #333;
                            font-size: 12px;
                        }
                    }

                    #ppgssubNav {
                        padding: 56px 0;
                        position: absolute;
                        width: 100%;
                        justify-content: center;
                        min-width: auto;
                        margin-bottom: 58px;
                        z-index: -999;


                        .sub_nav-left {
                            margin-right: 96px;
                            width: 420px;

                            img {
                                width: 100%;
                            }
                        }

                        .sub_nav-right {
                            padding-top: 44px;
                            text-align: left;
                            margin-right: 96px;

                            h5 {
                                margin-bottom: 20px;
                                font-size: 18px;
                                line-height: normal;
                                color: #2c2a29;
                            }

                            p {
                                font-size: 16px;
                                line-height: 34px;
                                color: #555250;
                            }

                            .link-tags {
                                margin-top: 40px;
                                font-size: 14px;
                                line-height: normal;
                                color: #000;
                                cursor: pointer;
                            }
                        }

                        .dr-world-link {
                            .filter-wrap {
                                margin-right: 130px;
                                margin-bottom: 20px;
                                font-size: 14px;
                                text-align: left;
                                color: #22282d;

                                .filter-title {
                                    padding-bottom: 10px;
                                    font-weight: 800;
                                    font-size: 16px;
                                    color: #79594d;
                                    line-height: normal;
                                }

                                .filter-text {
                                    cursor: pointer;
                                    line-height: normal;

                                    a {
                                        font-size: 14px;
                                        line-height: 36px;
                                        color: #696969;
                                        display: block;

                                        span {
                                            color: #696969;
                                            position: relative;

                                            &::after:hover {
                                                position: absolute;
                                                display: block;
                                                content: "";
                                                left: 0;
                                                bottom: -4px;
                                                width: 0;
                                                height: 1px;
                                                background: #997162;
                                                transition: all .5s ease-in-out;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                }


                #qhzjNav {
                    // position: absolute;
                    background-color: #fff;

                    .li_link2 {
                        .link {
                            position: relative;
                            display: inline-block;
                            color: #333;
                            font-size: 12px;
                        }
                    }

                    #qhzjsubNav {
                        display: flex;
                        padding: 56px 0;
                        position: absolute;
                        width: 100%;
                        justify-content: center;
                        min-width: auto;
                        margin-bottom: 58px;
                        z-index: -999;


                        .nav-left {
                            margin-right: 95px;
                            width: 278px;
                            height: 572px;

                            .ring_photo {
                                width: 270px;
                                height: 272px;

                                img {
                                    width: 100%;
                                }
                            }

                            .ring_desc {
                                margin-top: 6px;
                                width: 278px;
                                font-size: 12px;
                                line-height: 24px;
                                text-align: left;
                                color: #696969;
                            }

                        }

                        .nav-right {
                            width: 754px;
                            height: 392px;

                            .filters {
                                font-size: 14px;
                                display: flex;
                                justify-content: flex-start;
                                flex-wrap: nowrap;

                                .filter-wrap {
                                    margin-bottom: 0;
                                    text-align: left;
                                    color: #22282d;
                                    margin-right: 112px;

                                    .filter-title {
                                        font-size: 16px;
                                        padding-bottom: 10px;
                                        font-weight: 800;
                                        font-size: 16px;
                                        color: #79594d;
                                        line-height: normal;
                                    }

                                    .filter-text {
                                        font-size: 14px;
                                        cursor: pointer;
                                        line-height: normal;
                                        text-align: left;
                                        color: #22282d;

                                        a {
                                            width: 107px;
                                            font-size: 14px;
                                            line-height: 36px;
                                            color: #696969;
                                            display: block;

                                            span {
                                                font-size: 14px;
                                            }
                                        }
                                    }

                                    .link-tags {
                                        width: 124px;

                                        margin-top: 16px;

                                        line-height: normal;
                                        color: #000;
                                        cursor: pointer;

                                        span {
                                            font-size: 14px;

                                            &:hover {
                                                color: #997162;
                                            }
                                        }

                                    }
                                }
                            }
                        }
                    }

                }

                #zaskNav {
                    // position: absolute;
                    background-color: #fff;
                    .li_link3 {
                        .link {
                            position: relative;
                            display: inline-block;
                            color: #333;
                            font-size: 12px;
                        }
                    }

                    #zasksubNav {
                        padding: 46px 0;
                        min-width: auto;
                        justify-content: center;
                        display: flex;
                        position: absolute;
                        width: 100%;
                        z-index: -999;

                        .nav-left {
                            width: 278px;
                            height: 392px;
                            margin-right: 95px;

                            .ring_photo {
                                width: 270px;
                                height: 272px;
                            }

                            .ring_desc {
                                margin-top: 6px;
                                width: 278px;
                                font-size: 12px;
                                line-height: 24px;
                                text-align: left;
                                color: #696969;
                            }
                        }

                        .nav-right {
                            width: 711px;
                            height: 392px;

                            .filters {
                                font-size: 14px;
                                display: flex;
                                justify-content: flex-start;
                                flex-wrap: nowrap;

                                .filter-wrap {
                                    margin-bottom: 0;
                                    text-align: left;
                                    color: #22282d;
                                    margin-right: 60px;

                                    .filter-title {
                                        font-size: 16px;
                                        padding-bottom: 10px;
                                        font-weight: 800;
                                        font-size: 16px;
                                        color: #79594d;
                                        line-height: normal;
                                    }

                                    .filter-text {
                                        font-size: 14px;
                                        cursor: pointer;
                                        line-height: normal;
                                        text-align: left;
                                        color: #22282d;

                                        a {
                                            width: 140px;
                                            font-size: 14px;
                                            line-height: 36px;
                                            color: #696969;
                                            display: block;

                                            span {
                                                font-size: 14px;
                                            }
                                        }
                                    }

                                    .link-tags {
                                        width: 128px;

                                        margin-top: 16px;

                                        line-height: normal;
                                        color: #000;
                                        cursor: pointer;

                                        span {
                                            font-size: 14px;

                                            &:hover {
                                                color: #997162;
                                            }
                                        }

                                    }
                                }
                            }
                        }
                    }
                }

                #ppwhNav{
                    background-color: #fff;

                    .li_link4 {
                        .link {
                            position: relative;
                            display: inline-block;
                            color: #333;
                            font-size: 12px;
                        }
                    }
                    #ppwhNavgift{
                        padding: 44px 0 48px;
                        min-width: auto;
                        justify-content: center;
                        position: absolute;
                        display: flex;
                        z-index: -999;
                        .filters {
                            display: flex;
                            justify-content: center;
                            height: 269px;
                            width: 100%;

                            .filter-wrap {
                                font-size: 14px;
                                text-align: left;
                                color: #22282d;
                                margin-right: 112px;
                                margin-bottom: 21px;

                                .filter-title {
                                    padding-bottom: 10px;
                                    font-weight: 800;
                                    font-size: 16px;
                                    color: #79594d;
                                    line-height: normal;
                                }

                                .filter-text {
                                    font-size: 14px;
                                    cursor: pointer;
                                    line-height: normal;
                                    color: #22282d;

                                    a {
                                        width: 107px;
                                        font-size: 14px;
                                        line-height: 36px;
                                        color: #696969;
                                        display: block;
                                        
                                        span {
                                           width: 107px;
                                            font-size: 14px;
                                        }
                                    }
                                   
                                }
                                .link-tags {
                                    width: 140px;
                                    margin-top: 16px;
                                    line-height: normal;
                                    color: #000;
                                    cursor: pointer;
                                    transform: translateX(0px);
                                    transition: all .5s ease-in;
                                    span {
                                       font-size: 14px;
                                    }
                                    span:hover {
                                        color: #997162;
                                    }
                                }
                              
                            }
                        }
                    }

                }

                #shopNav{
                    // position: absolute;
                    background-color: #fff;
                    .li_link5 {
                        .link {
                            position: relative;
                            display: inline-block;
                            color: #333;
                            font-size: 12px;
                        }
                    }
                    #ShopsubNav{
                        display: flex;
                        position: absolute;
                        width: 100%;
                        z-index: -990;
                        padding: 38px 0;
                        min-width: auto;
                        justify-content: center;
                        .nav-right{
                            width: 286px;
                            height: 255px;
                            a{
                                color: #333;
                                font-size: 12px;
                                display: block;
                                img{
                                    width: 286px;
                                }
                            }
                        }
                        .nav-left{
                            padding-top: 55px;
                            .left-con{
                                width: 304px;
                                height: 69px;
                                .city-title{
                                    margin-bottom: 30px;
                                    font-size: 16px;
                                    color: #79594d;
                                    line-height: normal;
                                }
                                .city-wrap{
                                    font-size: 14px;
                                    color: #696969;
                                    line-height: normal;
                                    a{
                                        margin-left: 0;
                                        position: relative;
                                        display: inline-block;
                                        color: #333;
                                        font-size: 12px;
                                    }
                                }
                            }
                            .link-tags{
                                cursor: auto;
                                font-size: 14px;
                                line-height: normal;
                                color: #000;
                                a{
                                    display: inline-block;
                                    margin-top: 56px;
                                    font-size: 14px;
                                    line-height: 1;
                                    color: #000;
                                }
                            }
                        }
                    }
                }

                #DRsearch {
                    width: auto;

                    .searchKeyword {
                        width: 292px;
                        display: inline-block;
                        position: relative;

                        .login-input-box {

                            height: 40px;
                            line-height: 40px;
                            padding-left: 20px;
                            text-align: left;
                            background: #f2f2f2;
                            border: none;
                            border-radius: 3px;
                            margin-bottom: 0;

                            input {
                                background-color: transparent;
                                font-size: 10px;
                                width: 90%;
                                border: none;
                            }
                        }

                        .iconicon_sousuo {
                            cursor: pointer;
                            position: absolute;
                            right: 0;
                            top: 0;
                            margin-right: 0;
                            width: 45px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            color: #fff;
                            background: #192330;
                            border-radius: 3px;
                        }
                    }
                }


            }

        }

        .header-right {
            position: absolute;
            top: 34px;
            right: 52px;
            z-index: 10;

            .fix {
                display: flex;
                align-items: center;

                li {
                    position: relative;
                    margin: 0 0 0 30px;
                    font-size: 12px;
                    color: #1c1c1c;
                    cursor: pointer;
                }

                .search {
                    padding-right: 30px;
                    height: 20px;

                    .iconicon_sousuo {
                        opacity: 1;
                        position: absolute;
                        top: 50%;
                        right: 0;
                        z-index: 1;
                        margin-right: -5px;
                        transform: translateY(-50%);
                    }
                }

                .icon-text {
                    margin-left: 10px;
                    position: relative;

                    span {
                        color: #2d2a2a;
                        font-size: 16px;
                    }
                }

                .personal {
                    a {
                        color: #1c1c1c;

                        i {
                            display: inline-block;
                            margin-right: 0;
                            color: #1c1c1c;
                            vertical-align: middle;
                        }
                    }
                }

                .wish {
                    a {
                        color: #1c1c1c;

                        .iconfont {
                            display: inline-block;
                            font-size: 20px;
                            color: #1c1c1c;
                            vertical-align: middle;
                            margin-right: 0;
                        }
                    }
                }

                .shop-bag {
                    position: relative;

                    a {
                        color: #1c1c1c;

                        .iconfont {
                            display: inline-block;
                            font-size: 20px;
                            color: #1c1c1c;
                            vertical-align: middle;
                            margin-right: 0;
                        }
                    }
                }
            }
        }


    }


}

.userinfo {
    position: absolute;
    width: 130px;
    top: 60px;
    z-index: 999;
    right: 260px;
    background: gainsboro;
    border: 2px solid gainsboro;
    box-shadow: 3px 3px 3px gray;
    display: none;

    a {
        width: 20px;
        height: 20px;

        i {
            margin-left: 6px;
            font-family: "iconfont" !important;
            font-size: 18px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            span {
                margin-left: 20px;
            }
        }
    }
}